<template>
  <el-col>
    <el-tabs v-model="activeName" type="card">

      <el-tab-pane label="概况" name="1">
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-card>
              <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
              </el-date-picker>

              <el-select v-model="form.val" placeholder="选择类型">
                <el-option label="指标A" value="1">
                </el-option>
                <el-option label="指标B" value="2">
                </el-option>
              </el-select>

              <el-button type="primary">确定</el-button>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">良品率</h4>
              <div class="c-t-ct" style="color:#20A0FF;">99.88 %</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">同比增长</h4>
              <div class="c-t-ct" style="color:#13CE66;">16.14 %</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">环比增长</h4>
              <div class="c-t-ct" style="color:#13CE66;">18.97 %</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">预警指标</h4>
              <div class="c-t-ct" style="color:#FF4949;">水： 15.7万元</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <div id="chart_105_1" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chart_105_2" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chart_105_3" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="分析预警" name="2">
        <el-card>
          </el-row>
          <el-col :span="16">
            <div id="chart105_2_1" style="width:100%; height:300px;"></div>
          </el-col>
          <el-col :span="8">
            <div id="chart105_2_2" style="width:100%; height:300px;"></div>
          </el-col>
          </el-row>
        </el-card>

        <el-card>
          </el-row>
          <el-col :span="24">
            <div id="chart105_2_3" style="width:100%; height:300px;"></div>
          </el-col>
          </el-row>
        </el-card>
        <el-card>
          <el-row :gutter="20">
            <el-col :span="12" :offset="1">
              <h4>模型预测分析</h4>
              <el-form label-position="left" label-width="80px" :model="formLabelAlign">
                <el-form-item label="电力">
                  <el-slider v-model="formLabelAlign.val1"></el-slider>
                </el-form-item>
                <el-form-item label="水力">
                  <el-slider v-model="formLabelAlign.val2"></el-slider>
                </el-form-item>
                <el-form-item label="气动">
                  <el-slider v-model="formLabelAlign.val3"></el-slider>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="7" :offset="3">
              <!-- <div id="chart105_2_1" style="width:100%; height:300px;"></div> -->
              <el-row>
                <el-col :span="24">
                  <el-card class="card-tips">
                    <h4 class="c-t-title">成本</h4>
                    <div class="c-t-ct" style="color:#20A0FF;">99 万元</div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-card class="card-tips">
                    <h4 class="c-t-title">良品率</h4>
                    <div class="c-t-ct" style="color:#20A0FF;">97 %</div>
                  </el-card>
                </el-col>
              </el-row>

            </el-col>
            <el-col :span="24">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加模型</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                  <el-button type="primary">运行</el-button>
                  <el-button>复位</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_2_1" border style="width: 100%">
                    <el-table-column prop="name" label="模型名称">
                    </el-table-column>
                    <el-table-column prop="qy" label="公式">
                    </el-table-column>
                    <el-table-column label="投料" align="center">
                      <el-table-column prop="y" label="液体(ml)"></el-table-column>
                      <el-table-column prop="q" label="气体(ml)"></el-table-column>
                      <el-table-column prop="g" label="固体(m³)"></el-table-column>
                    </el-table-column>
                    <el-table-column label="废料" align="center">
                      <el-table-column prop="y" label="废液(ml)"></el-table-column>
                      <el-table-column prop="q" label="废气(ml)"></el-table-column>
                      <el-table-column prop="g" label="固废(m³)"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="cl" label="良品率(%)">
                    </el-table-column>

                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="190">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="配置规则" name="3">
        <el-card class="charts-card">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24">
              <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
              </el-input>
              <el-button type="primary">搜索</el-button>
              <el-button type="primary">添加事件</el-button>
              <el-button type="primary">导入</el-button>
              <el-button type="primary">导出</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData_3_1" style="width: 100%">
                <el-table-column prop="name" label="事件">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="q" label="区域"></el-table-column>
                <el-table-column prop="j" label="事件等级"></el-table-column>
                <el-table-column prop="y" label="负责人"></el-table-column>
                <el-table-column prop="z" label="方式"></el-table-column>
                <el-table-column label="状态">
                  <template scope="scope">
                    <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="charts-card">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24">
              <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
              </el-input>
              <el-button type="primary">搜索</el-button>
              <el-button type="primary">添加维护</el-button>
              <el-button type="primary">导入</el-button>
              <el-button type="primary">导出</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData_3_1" style="width: 100%">
                <el-table-column prop="name" label="机台维护项">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="q" label="区域"></el-table-column>
                <el-table-column prop="j" label="事件等级"></el-table-column>
                <el-table-column prop="y" label="负责人"></el-table-column>
                <el-table-column prop="z" label="方式"></el-table-column>
                <el-table-column label="状态">
                  <template scope="scope">
                    <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>

  </el-col>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      activeName: '1',
      formLabelAlign: { val1: 58, val2: 38, val3: 68 },
      form: {},
      tableData2: [{
        date: '2016-05-02',
        name: '机台维修计划导入',
      }, {
        date: '2016-05-04',
        name: '事件添加与参数配置',
      }, {
        date: '2016-05-04',
        name: '动力事件分析（时间、类型、级别、区域）',
      }],
      tableData_2_1: [{
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 3.5,
        status: '100',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 3.5,
        status: '0',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 4.5,
        status: '0',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 3.5,
        status: '0',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 2.5,
        status: '0',
      }],
      tableData_3_1: [{
        name: '事件A',
        type: '电力',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }, {
        name: '事件A',
        type: '电力',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }, {
        name: '事件A',
        type: '水力',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }, {
        name: '事件A',
        type: '气动',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }, {
        name: '事件A',
        type: '电力',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }, {
        name: '事件A',
        type: '电力',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }],
      chart1: null,
      chart2: null,
      chart3: null,
      chart105_2_1: null,
      chart105_2_2: null,
      chart105_2_3: null,
    }
  },
  methods: {
    drawChart1() {
      let dom = document.getElementById('chart_105_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart1 = echarts.init(dom);

      this.chart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['电', '纯水', 'CDA','PV','PCW', '良品率']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '动力值',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} W'
            }
          },
          {
            type: 'value',
            name: '良品率',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '电',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '纯水',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
           {
            name: 'CDA',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },{
            name: 'PV',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },{
            name: 'PCW',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '良品率',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],

          }
        ]
      });
    },
    drawChart2() {
      let dom = document.getElementById('chart_105_2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart2 = echarts.init(dom);


      this.chart2.setOption({
        title: {
          text: '品质同比与环比'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['同比', '环比']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '同比',
            type: 'line',
            data: [12.0, 13.2, 10.1, 13.4, 25, 23.0, 21.0]
          },
          {
            name: '环比',
            type: 'line',
            data: [22.0, 18.2, 19.1, 23.4, 29.0, 33.0, 31.0]
          },
        ]
      });
    },
    drawChart3() {
      let dom = document.getElementById('chart_105_3')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart3 = echarts.init(dom);


      this.chart3.setOption({
        title: {
          text: '动力占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['水能', '电能', '气动']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '水能' },
              { value: 310, name: '电能' },
              { value: 234, name: '气动' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    drawChart105_2_1() {
      let dom = document.getElementById('chart105_2_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart105_2_1 = echarts.init(dom);

      this.chart105_2_1.setOption({
        title: {
          text: '机台&动力&品质联动'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },

          }
        },
        legend: {
          data: ['气力', '电能', '特气', '水']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['A机台', 'B机台', 'C机台', 'D机台', 'E机台', 'F机台', 'G机台']
        },
        series: [
          {
            name: '气力',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: '电能',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '特气',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: '水',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      });
    },
    drawChart105_2_2() {
      let dom = document.getElementById('chart105_2_2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart105_2_2 = echarts.init(dom);

      this.chart105_2_2.setOption({
        title: {
          "subtext": '97%',
          "text": '良品率',
          "x": '50%',
          "y": '45%',
          textAlign: "center",
          "textStyle": {
            "fontWeight": 'normal',
            "fontSize": 24
          },
          "subtextStyle": {
            "fontWeight": 'bold',
            "fontSize": 32,
            "color": '#3ea1ff'
          }
        },
        series: [
          {
            "name": ' ',
            "type": 'pie',
            "radius": ['50%', '70%'],
            "avoidLabelOverlap": false,
            "startAngle": 225,
            "color": ["#9f8fc1", "transparent"],
            "hoverAnimation": false,
            "legendHoverLink": false,
            "label": {
              "normal": {
                "show": false,
                "position": 'center'
              },
              "emphasis": {
                "show": true,
                "textStyle": {
                  "fontSize": '30',
                  "fontWeight": 'bold'
                }
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 75,
              "name": '1'
            }, {
              "value": 25,
              "name": '2'
            }]
          },
          {
            "name": '',
            "type": 'pie',
            "radius": ['52%', '68%'],
            "avoidLabelOverlap": false,
            "startAngle": 317,
            "color": ["#fff", "transparent"],
            "hoverAnimation": false,
            "legendHoverLink": false,
            "clockwise": false,
            "itemStyle": {
              "normal": {
                "borderColor": "transparent",
                "borderWidth": "20"
              },
              "emphasis": {
                "borderColor": "transparent",
                "borderWidth": "20"
              }
            }
            ,
            "z": 10,
            "label": {
              "normal": {
                "show": false,
                "position": 'center'
              },
              "emphasis": {
                "show": true,
                "textStyle": {
                  "fontSize": '30',
                  "fontWeight": 'bold'
                }
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 3,
              "name": ''
            }, {
              "value": 100 - 3,
              "name": ''
            }
            ]
          }

        ]
      });
    },
    drawChart105_2_3() {
      let dom = document.getElementById('chart105_2_3')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart105_2_3 = echarts.init(dom);

      this.chart105_2_3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['水能', '电能', '气动', '良品率']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '动力值',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} W'
            }
          },
          {
            type: 'value',
            name: '良品率',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '水能',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '电能',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }, {
            name: '气动',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '良品率',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            markLine: {
              lineStyle: {
                normal: {
                  type: 'solid',
                  color: 'rgb(180, 180, 180)'
                }
              },
              data: [{
                xAxis: '6月'
              }]
            }
          }
        ]
      });
    },
    // 绘制
    drawCharts() {
      switch (this.activeName) {
        case '1':
          this.drawChart1()
          this.drawChart2()
          this.drawChart3()
          break;
        case '2':
          this.drawChart105_2_1()
          this.drawChart105_2_2()
          this.drawChart105_2_3()
          break;
        case '3':
          // this.drawSLASJChart()
          break;
        default:
          break
      }
    },
    // 刷新
    resizeAllChart() {
      switch (this.activeName) {
        case '1':
          this.chart1.resize()
          this.chart2.resize()
          this.chart3.resize()
          // this.chartLine.resize()
          // this.chartPie.resize()
          break;
        case '2':

          this.chart105_2_1.resize()
          this.chart105_2_2.resize()
          this.chart105_2_3.resize()
          break;
        case '3':
          // this.chartSLASJ.resize()
          break;
        default:
          break
      }

    }
  },
  mounted() {
    console.log('mounted')
    this.drawCharts()
    this.$nextTick(() => {
      window.onresize = this.resizeAllChart
    })
  },
  updated() {
    console.log('updated')
    this.drawCharts()
    this.resizeAllChart()
  }
}
</script>

<style scoped>
.el-card {
  margin-bottom: 10px
}
</style>